<template>
<div class="commonBox" >
    <p>
        <span class="tit1">培训计划完成率</span>
    </p>
    <div style="height: 400px">
        <div ref="chart2" class='top20' style="width: 100%; height: 300px" />
        <div style="margin: 0 auto; width: 360px;">
            <table>
                <tr v-for="(item, index) in chartData.data2" :key="index">
                    <td style="width: 20px"><span class="yuan" :style="{backgroundColor: chartData.color[index]}"></span> </td>
                    <td style="width: 200px"><span class="left20">{{item.name}}</span></td>
                    <td style="width: 60px"><span class="">已培训</span></td>
                    <td><span class="font24 col000">{{item.value}}</span></td>
                    <td style="text-align: right"><span class="">人</span></td>
                </tr>
            </table>
        </div>
    </div>
    
</div>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
export default {
    components: {},
    props: {},
    data() {
        return {
            chartData: {
                data1: ['养老护理员', '照护师', '康复师'],
                data2: [{value: 80, name: '养老护理员'},{value: 120, name: '照护师'},{value: 60, name: '康复师'}],
                data3: [],
                color: ['#10CF98','#9448F3', '#E97A01']
            }
        }
    },
    computed: {},
    watch: {

    },
    created() {
        const t = this;
        
    },
    mounted() {
        const t = this;
        t.initChart();
    },
    methods: {
        initChart() {
            this.chart = echarts.init(this.$refs.chart2, 'macarons')
            this.setOptions()
        },
        setOptions() {
            const t = this;
            this.chart.setOption({
                tooltip: {
                    trigger: 'item',
                    formatter: '{b} : {c} ({d}%)'
                },

                // legend: {
                //     orient: 'vertical',
                //     right: 20,
                //     top: 100,
                //     data: t.chartData.data1
                // },
                color: t.chartData.color,
                series: [{
                    type: 'pie',
                    radius: ['50%', '70%'],
                    center: ['50%', '40%'],
                    data: t.chartData.data2,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }]
            })
        }
    }
}
</script>

<style lang="scss" scoped>
</style>
